import React, {Component} from 'react'
import styles from './dialog.module.css'

class LoadingAnim extends Component {
	constructor(props) {
		super(props)

		this.state = {
			current: 0
		}
	}

	timerAction() {
		this.setState((prevState, props) => ({
			current: prevState.current == 2 ? 0 : prevState.current + 1
		}))
	}

	componentDidMount() {
		this.timerID = window.setInterval(this.timerAction.bind(this), 200)
	}

	componentWillUnmount() {
		window.clearInterval(this.timerID)
	}

	render() {
		return (
			<div className={styles.loading} style={{...this.props.style}}>
				{
					new Array(3).fill(0).map((v, i) => {
						return <span className={[styles.circle, this.state.current == i && styles.current].join(' ')} key={i}></span>
					})
				}
			</div>
		)
	}
}


class Dialog extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		return (
			<div className={styles.mask}>
				<div className={styles.dialog} style={{...this.props.style}}>
					{
						this.props.loading ? 
						<LoadingAnim style={{margin: '4vw 0'}} /> : 
						this.props.children
					}
				</div>
			</div>
		)
	}
}

Dialog.defaultProps = {
	loading: false
}

export default Dialog
export {LoadingAnim}